<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>人工客服</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/chat/css/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/chat/css/layui.css}">

    <!--    引入alibaba iconfont，表情-->
    <script src="//at.alicdn.com/t/font_2994454_x1hkqrl5b48.js"></script>


    <script type="text/javascript" th:src="@{/static/chat/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/chat/js/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/chat/js/json2.js}"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" th:href="@{/static/chat/css/bootstrap.min.css}">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" th:src="@{/static/chat/js/bootstrap.js}"></script>
    <style type="text/css">
        * {
            font-size: 14px;
            padding: 0;
            margin: 0;
        }

        #chatRecord {
            position: relative;
            margin: 20px auto;
            border: 1px solid steelblue;
            width: 600px;
            height: 500px;
        }

        .msgContent {
            width: auto;
            max-width: 250px;
            height: auto;
            word-break: break-all;
            margin: 5px;
            padding: 3px;
            border-radius: 5px;
        }

        #chatZone .left {
            list-style: none;
            text-align: left;
        }

        #chatZone .left .p {
            float: left;
            text-align: left;
            background-color: lightgrey;
            font-size: 4ex;

        }

        #chatZone .left .title {
            text-align: left;
            font-size: 5px;
            color: grey;
        }

        #chatZone .right {
            float: right;
            list-style: none;
            text-align: right;
        }

        #chatZone .right .title {
            text-align: right;
            font-size: 5px;
            color: grey;
            clear: both;
        }

        #chatZone .right .p {
            float: right;
            text-align: right;
            background-color: yellowgreen;
            font-size: 4ex;

        }

        #chatZone .right .title {

            font-size: 15px;
        }

        #chatZone .left .title {

            font-size: 15px;
        }



        #leftbox{

            width: 200px;
            height: 479px;
            border: 2px solid #666666;


            float: left;
            margin-left: 160px;
            margin-top: 70px;
        }

        #leftMenu{

            width: 150px;
            height: 370px;
            /*border: 1px solid;*/
            margin: 0 auto;
            margin-top: 5%
        }


        #leftMenu ul>li
        {
            list-style: none;
            line-height: 20px;
            margin-left: 40px;
        }
        #leftMenu ul>li>a{

            text-decoration: none;
            color: #000000;

        }
        .na{
            white-space: nowrap; /*强制span不换行*/
            display: inline-block; /*将span当做块级元素对待*/
            width: 110px; /*限制宽度*/
            overflow: hidden; /*超出宽度部分隐藏*/
            text-overflow: ellipsis; /*超出部分以点号代替*/
            font-size: 15px;
        }

        /* iconfont*/
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 30px;
        }

        #panel
        {
            padding:10px;
            display:none;
            border: 2px orange solid;
            width: 350px;
            overflow: auto;
            /*position: absolute;*/
            background-color: antiquewhite;
        }
        panel panel-htop easyui-fluid{
            width: auto;
        }

    </style>
</head>
<body>


<div id="box">
<!--    展示在线客服-->
<!--    <div id="leftbox">-->

<!--        <div id="leftMenu">-->
<!--            <b>实时客服数:-->
<!--            </b>-->
<!--                <b id="count" style="font-size: 13px">-->
<!--                    0-->
<!--                </b>-->
<!--                <a onclick="refresh()" style="cursor: pointer;color:blue;text-decoration: none;font-size: 13px">刷新</a></span>-->
<!--            <ul id="leftul">-->
<!--&lt;!&ndash;                <li>&ndash;&gt;-->
<!--&lt;!&ndash;                    <a href="#" style="color: red;pointer-events: none;">客服-admin1</a>&ndash;&gt;-->
<!--&lt;!&ndash;                </li>&ndash;&gt;-->
<!--                <li th:each="name:${names}" th:if="${names ne null and names.size()>0}">-->
<!--                    <a class="na" style="cursor: pointer">[[${name}]]</a>-->
<!--                </li>-->

<!--            </ul>-->

<!--        </div>-->

<!--    </div>-->

    <div class="panel panel-primary" id="leftbox">
        <div class="panel-heading">
            <h3 class="panel-title">实时客服数:

                <b id="count" style="font-size: 13px">
                    0
                </b>
                <a onclick="refresh()" style="cursor: pointer;color:blue;text-decoration: none;font-size: 13px">刷新</a></span>
            </h3>
        </div>
        <div class="panel-body">
            <div id="leftMenu">
                <ul id="leftul">
                    <li th:each="name:${names}" th:if="${names ne null and names.size()>0}">
                        <a class="na" style="cursor: pointer">[[${name}]]</a>
                    </li>

                </ul>

            </div>
        </div>
    </div>



    <div id="chatBox">

<!--        <span>-->
            <input type="hidden" id="linkAgent" th:value="${userid}"  style="width: 150px"/>
            <input type="hidden" id="nickname" th:value="${currentUser}" style="width: 150px"/>
<!--        </span>-->

        <div class="panel panel-primary" style="width: 720px">
            <div class="panel-heading">
                <h3 class="panel-title">聊天窗口</h3>
            </div>
            <div class="panel-body">
                <div data-options="region:'center'" class="easyui-panel" style="width: 640px;height:400px;  padding: 5px;"
                     id="chatRecord">
                    <ul class="chatDialog-main clearfix" id="chatZone">

                    </ul>
                </div>
            </div>
        </div>

<!--        <div data-options="region:'center'" class="easyui-panel" style="width: 50%;height:500px;  padding: 5px;"-->
<!--             id="chatRecord">-->
<!--            <ul class="chatDialog-main clearfix" id="chatZone">-->

<!--            </ul>-->
<!--        </div>-->

        <div style="margin-left: 24%">

            <div id="panel" class="dropdown">
                <div id="myDropdown" class="dropdown-content" style="width: 320px;height: 55px">

                    <span th:each="set:${sets}" th:utext="${emojimap.get(set)}" th:onclick="appendEmoji([[${set}]])"></span>

                </div>
            </div>

            <input id="flip" type="button" class="btn btn-primary" value="表情">

        </div>


            <div style="width: 50%; padding: 5px;margin-left: 360px">
                <table height="100%" cellpadding="0px" cellspacing="0px">
                    <tr>
                        <td height="100px">
                            <table cellpadding="5px" cellspacing="0" border="0">
                                <tr style="vertical-align: middle;">
                                    <td>
                                        <textarea style="width: 670px; height: 100px; overflow: auto; vertical-align: middle;" id="txtMessage" name="txtMessage"></textarea>
                                    </td>
                                    <td style="width: 6px"></td>
                                    <td style="vertical-align: middle;">
                                        <a id="btnSend" href="javascript:void(0)"
                                           class="layui-btn layui-btn-radius" data-options="size:'large'">发送</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

    </div>


</div>

</body>
<script th:inline="javascript">
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (hours >= 0 && hours <= 9) {
            hours = "0" + hours;
        }
        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + hours + seperator2 + minutes
            + seperator2 + seconds;
        return currentdate;
    }

    function refresh() {
        $.ajax({
            url: "/chat/refreshData",
            type: 'get',
            success: function (result) {
                document.getElementById('count').innerText=result.count;
                document.getElementById('leftul').innerHTML='';

                var len=result.list.length;
                var html='';
                for (let i=0;i<len;i++){

                    html+='<li>';

                    html+='<a class="na" style="cursor: pointer">'
                    html+=result.list[i];
                    html+='</a>';
                    html+='</li>';

                }

                $('#leftul').append(html);

            }
        })
    }


    // $(function () {
        var websocket;
        var nickname;
        $(window).keyup(function (event) {
            if (event.keyCode == 13) {   //监控回车键，发送信息
                $("#btnSend").click();
                return true;
            }
        });
        $("#btnSend").click(function () {
            var from = $("#linkAgent").val();
            var msg = $("#txtMessage").val();
            var obj = new Object();
            obj.from = from;

            var map=[[${emojimap}]];
            var sets=[[${sets}]];

            for (let i=0;i<[[${sets.size()}]];i++){
                msg=msg.replaceAll(sets[i],map[sets[i]]);
            }

            obj.message = msg;
            obj.nickname = nickname;
            var json = JSON.stringify(obj);
            var result = websocket.send(json);
            var message = "<li class='msgContent right'>" +
                "<p class='msgContent right title'>" + nickname + " (" + getNowFormatDate() + "):</p>" +
                "<p class='msgContent right p'>" + msg + "</p></li>" +
                "<div style='clear:both'></div>";
            $("#chatZone").append(message);
            $("#txtMessage").val("");

        });


        // $("#btnLink").click(function () {
    window.onload=function () {

        var agent = $("#linkAgent").val();
        nickname = $("#nickname").val();
        if ('WebSocket' in window) {

        } else {
            alert("您的浏览器版本太低，请升级浏览器版本！");
            return;
        }
        if ('WebSocket' in window) {
            var wsUrl = "ws://" + window.location.host + "/websocket/";

            websocket = new WebSocket(wsUrl + agent);

            //连接发生错误的回调方法
            websocket.onerror = function () {
                console.log(" websocket.onerror :error");
            };

            //连接成功建立的回调方法
            websocket.onopen = function (event) {

                $.ajax({
                    url: "/chat/refreshData",
                    type: 'get',
                    async:false,
                    success: function (result) {
                        document.getElementById('count').innerText=result.count;
                        document.getElementById('leftul').innerHTML='';

                        var len=result.list.length;
                        var html='';
                        for (let i=0;i<len;i++){

                            html+='<li>';

                            html+='<a class="na" style="cursor: pointer">'
                            html+=result.list[i];
                            html+='</a>';
                            html+='</li>';

                        }

                        $('#leftul').append(html);

                    }
                })

            }

            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                msg = eval('(' + event.data + ')');
                var mg=msg.message; //消息

                if (msg.from != agent) {
                    var message = "<li class='msgContent left'>" +
                        "<p class='msgContent left title'>" + msg.nickname + " (" + getNowFormatDate() + "):</p>" +
                        "<p class='msgContent left p'>" + mg + "</p></li>" +
                        "<div style='clear:both'></div>";
                    $("#chatZone").append(message);
                }

            }

            //连接关闭的回调方法
            websocket.onclose = function () {
                console.log(" websocket.onclose :close");
                websocket = new WebSocket(wsUrl + agent);
            }

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function () {
                websocket.close();
            }
        }

    }

        // });
    // });

    //jquery滑动
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("fast");
        });
    });

    function appendEmoji(appendKey) {

        var ele = document.getElementById("txtMessage");

        ele.value = ele.value + appendKey;
    }


</script>
</html>